@charset "utf-8";

//样式里的l,m,r,t,b分别代表左，中，右，上，下
//布局
header {

}

main {
  flex: 1;
  display: flex;
  flex-direction: row;
  padding: 3.625rem 6rem 5rem 4.625rem;

  .l, .m, .r, .chart-box {
    //outline: 1px dashed orange;
  }

  h4 {
    font-size: 0.75rem;
    color: var(--c_mainWhite);
    letter-spacing: 0;
  }


}

// 左侧样式
.l {
  flex: 0 0 32%;
  //height: 52.5rem;
  //padding: 3.75rem 0 0 3.75rem;
  display: flex;
  flex-direction: column;

  .l-t {
    flex: 0 0 17%;
    .l_text {
      &:nth-of-type(2){
        padding-left: 2rem;
      }
      &:nth-of-type(3){
        padding-left: 1rem;
      }
      float: left;
      width: 33.3%;
      height: 9rem;
      padding: 2rem 0;
      //border: 1px solid pink;
      h4:before {
        content: '';
        position: relative;
        display: inline-block;
        top: -.125rem;
        width: .375rem;
        height: .375rem;
        vertical-align: middle;
        background: #2377fe;
        line-height: 1rem;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin-right: 0.8rem;
      }
    ;

      .text {
        padding-top: 1.2rem;
        padding-left: 1.125rem;
        .digital-num {
          font-size: 1.625rem;
          color: #fff;
          font-weight: bold;


        }
        i {
          margin-left: -.5rem;
          font-size: 1.5rem;
          color: #e5225a;
        }

        .ratevalue {
          width: 2rem;
          color: #666;
          font-size: 0.75rem;

          .iconfont {
            font-size: 1.375rem; //22px
            margin: 0 0 0 1rem;
            color: var(--c_mainBlue);
            vertical-align: middle;
          }
        }

      }
    }
  }

  .l-b {
    flex: 0 0 80%;
    //border: 1px solid red;
    .chartBox {
      height: 52%;
      width: 100%;
      //border: 1px solid red;

      .thecity {
        height: 80%;
      }

    }

    .chartBox:nth-child(2) {
      margin-top: 2rem;
      .thecity {
        height: 82%;
      }

    }

  }
}


// 中间和右边
.m, .r {
  .chartBox {
    padding-top: 4.5rem;
  }

  img {
    width: 33.25rem;
  }

  .legendGroup {
    position: relative;
    top: -1rem;
    margin-left: 6.5rem;
    font-size: .875rem;

    dt {
      margin-bottom: .5rem;
    }

    dd {
      position: relative;
      padding-left: 3rem;
      margin-bottom: .25rem;

      &:before {
        content: '';
        display: inline-block;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1.625rem;
        height: .75rem;
        margin-right: .875rem;
        margin-bottom: .375rem;
        background-color: #03cb9a;
      }

      &:nth-of-type(1):before {
        background-color: #0a0919;
        outline: .0625rem solid #103e84;
      }

      &:nth-of-type(2):before {
        background-color: #103e84;
      }

      &:nth-of-type(3):before {
        background-color: #227af9;
      }

      &:nth-of-type(4):before {
        background-color: #03cb9a;
      }

      &:nth-of-type(5):before {
        background-color: #ffad38;
      }

      &:nth-of-type(6):before {
        background-color: #ffee5a;

      }
    }
  }
}

.m {
  flex: 0 0 38%;
  padding-left: 5rem;

  .m_header {
    padding: 1.25rem .25rem;
  }
}

.r {
  .r_header {
    padding: 1.25rem .5rem;
  }

  flex: 0 0 30%;

}


